<template>
  <!-- 需求管理 -->
  <div class="honors-container-padding">
    <el-form :inline="true" :model="formInline" class="form-inline">
      <el-form-item label="成果及荣誉类型：" style="padding: 0">
        <el-select v-model="formInline.type" placeholder="请选择" clearable>
          <el-option
            v-for="item in typeOptions"
            :label="item.label"
            :value="item.value"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="成果名称：">
        <el-input v-model="formInline.name" />
      </el-form-item>
      <el-form-item label="人员名称：">
        <el-input v-model="formInline.personnelName" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="margin-right: 10px"
          @click="handSearch"
        >
          搜索
        </el-button>
        <el-button @click="handReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <div class="buttonList">
      <el-button type="primary" @click="handAddHonors">
        新增成果及荣誉
      </el-button>
      <el-button @click="handExport" :loading="downLoading">
        导出搜索结果
      </el-button>
    </div>
    <vxe-grid v-bind="honorsOptions" :height="height">
      <template #operate="{ row }">
        <el-button type="primary" link @click="viewEvent(row, 1)">
          详情
        </el-button>
        <el-button type="primary" link @click="viewEvent(row, 2)">
          修改
        </el-button>
        <el-button type="danger" link @click="del(row)">删除</el-button>
      </template>
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue'
  import { honorsOptions } from './table/column'
  import { useRouter } from 'vue-router'
  import {
    getAchievement,
    getDemandAchievement,
    deletedAchievement,
  } from '@/api/postdoctor'
  import { VxePagerEvents } from 'vxe-table'
  import { useDictStore } from '@/store/modules/dict'
  import { useDownload } from '@/utils/useDownload'

  const dictStore = useDictStore()
  const router = useRouter()
  // 搜索表单
  const formInline = ref({
    type: '',
    name: '',
    personnelName: '',
  })

  const typeOptions = computed(() => dictStore.getDictType('achievement_type'))
  // 搜索
  const handSearch = () => {
    getList()
  }
  // 重置搜索
  const handReset = () => {
    formInline.value = { type: '', name: '', personnelName: '' }
  }
  // 导出搜索结果
  const { downLoading, downloadFile } = useDownload(
    getDemandAchievement,
    '成果及荣誉.xls'
  )
  const handExport = async () => {
    await downloadFile({
      ...formInline.value,
    })
  }

  const handAddHonors = () => {
    router.push('/postdoctor/honors/add')
  }

  const viewEvent = (item, index) => {
    if (index == 1) {
      router.push({
        path: '/postdoctor/honors/details',
        query: { type: item.type },
      })
    }
  }

  const getList = () => {
    const params = {
      pageNo: 1,
      pageSize: 10,
    }
    getAchievement(params).then((res) => {
      const { list } = res.data
      honorsOptions.data = list
    })
  }

  onMounted(() => {
    getList()
  })

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    getList()
  }

  const del = (row: any) => {
    ElMessageBox.confirm('确认要删除该条成果及荣誉信息?', '删除成果及荣誉', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deletedAchievement(row.id).then((res: any) => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        }
        getList()
      })
    })
  }

  const height = ref(0)
  const $baseTableHeight = inject<any>('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped lang="scss">
  .buttonList {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  :deep(.el-divider) {
    margin: 8px 0 20px 0 !important;
  }

  .form-inline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
  }
</style>
